<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--
  Created by IntelliJ IDEA.
  User: SunKai
  Date: 14-11-11
  Time: 上午11:49
  To change this template use File | Settings | File Templates.
--%>
<html>
<head>
    <title>APP首页图片</title>
    <script>
        $(function () {
            $("#firstImage").change(function () {
                $("#addImage").show();
                $("#delImage").show();
            });
            $("#addImage").click(function () {
                var content = '<input type="file"  name="firstImages">';
                if ($(":file").length < 5) {
                    $(":file:last").after(content);
                }
            });
            $("#delImage").click(function () {
                if ($(":file").length > 2) {
                    $(":file:last").remove();
                } else {
                    $(":file:last").val("");
                }
            });
        });

        function mouseover(id) {
            var index = id.substr(6);
            $("#delImg_" + index).show();
        }

        function mouseout(id) {
            var index = id.substr(6);
            $("#delImg_" + index).hide();
        }

        function delImg(imgGuid) {
            var guid = $("#guid").val();
            $.ajax({
                url: "/bannerforapp/delImg",
                type: "POST",
                dataType: "json",
                data: "imgGuid=" + imgGuid,
                success: function (data) {
                    location.reload();
                }
            })
        }

        function delImg2(imgGuid) {
            var guid = $("#guid").val();
            $.ajax({
                url: "/bannerforapp/delImg2",
                type: "POST",
                dataType: "json",
                data: "imgGuid=" + imgGuid,
                success: function (data) {
                    location.reload();
                }
            })
        }


    </script>
</head>
<body>
<div style="height: 50px;">

</div>
<div style="width: 100%" align="center">
    <div style="width: 50%">
<form:form class="form-horizontal" role="form" commandName="bannerForApp" action=""
           enctype="multipart/form-data">
    <div>
        <div>
            <label>App下方图：</label>

            <div>
                <input type="file" id="secondImage" name="secondImage">

            </div>
            <label>原图：</label>
            <div>
                <c:if test="${bannerForApp.secondImageGuid!=null}">
                    <img src="/public/image/${bannerForApp.secondImageGuid}" style="width:50px;height:70px">
                    <a href="" onclick="delImg2('${bannerForApp.secondImageGuid}')">删除</a>
                </c:if>
            </div>
        </div>
    </div>
    <br/>
    <p style="height: 10px;background-color:royalblue"></p>

    <div>
        <div>
            <label>App上方图：</label>
            <label>原图：</label>
            <c:if test="${bannerForApp.firstImageGuids!=null}">
                <c:forEach items="${bannerForApp.firstImageGuids}" var="images" varStatus="status">
                    <img src="/public/image/${images}" style="width:50px;height:70px"
                         class="houseBaseImg" id="hbImg_${status.index}"
                         onmouseover="mouseover('hbImg_${status.index}')"
                         onmouseout="mouseout('hbImg_${status.index}')">
                    <img src="/public/img/x.png" style="margin-top: -35px;margin-left:-39px;opacity:0.8"
                         class="delImg" onclick="delImg('${images}')" id="delImg_${status.index}">
                </c:forEach>
            </c:if>
            <div>
                <input type="file" id="firstImage" name="firstImages">
                <a id="addImage" style="display:none">添加</a>&nbsp;
                <a id="delImage" style="display:none">删除</a>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <label class="col-sm-2 control-label"></label>

            <div class="col-sm-10">
                <input type="hidden" value="${bannerForApp.guid}" name="guid"/>
                <input type="submit" value="保存"/>
            </div>
        </div>
    </div>
</form:form>
    </div>
</div>
</body>
</html>
